博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序wx.previewImage实用案例(交流QQ群:604788754)
阅读量:6291 次
发布时间:2019-06-22

本文共 831 字,大约阅读时间需要 2 分钟。

本案例是可以滑动预览多张图片效果。(本案例在本地配置好之后,请扫描二维码到手机滑动预览。在开发者工具上预览,滑动不是很流畅)

图片必须选择远程图片,本地图片无法实现预览。

或是通过wx.chooseImage上传的图片数组。

微信开发者工具:0.18.182200

欢迎对小程序开发有兴趣的朋友加群(604788754)交流学习。

WXML:

WXSS:

.wrap{  width: 100px;  height: 100px;  float: left;  margin-right: 15px;}.wramimg{    width: 100px;  height: 100px;}

JS:

Page({  data: {    pictures: [      'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',      'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',      'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg'    ]  },  previewImage: function (e) {    var index = e.currentTarget.dataset.index;    var pictures = this.data.pictures;    wx.previewImage({      current: pictures[index],      urls: pictures    })  }})

预览前效果:

在手机端预览后效果:

转载地址:http://ajkta.baihongyu.com/

你可能感兴趣的文章
【Linux】查询某个字符串出现次数
查看>>
高效使用jquery之一:请使用'On'函数
查看>>
冲刺第一周第三天
查看>>
ERP环境检测工具设计与实现 Environment Detection
查看>>
不要在构造中做太多事情,不然有时候会出现有意思的代码~
查看>>
IIS 发布网站遇到的问题
查看>>
NuGet学习笔记(2)——使用图形化界面打包自己的类库
查看>>
xcode中没有autoSizing的设置
查看>>
两程序员不同境遇:少抱怨 多解决问题
查看>>
字符编码
查看>>
企业应用:应用层查询接口设计
查看>>
浅谈Excel开发:十 Excel 开发中与线程相关的若干问题
查看>>
nfd指令的详细说明
查看>>
安装VisualSvn Server时遇到的问题
查看>>
不用Visual Studio,5分钟轻松实现一张报表
查看>>
虚拟机备份克隆导致SQL SERVER 出现IO错误案例
查看>>
人脸识别 开放书籍 下载地址
查看>>
Notepad++配置Python开发环境
查看>>
用户组概念 和 挂载 概念
查看>>
如何快速获取ADO连接字符串
查看>>